<template>
    <div class="service_scope">
        <titleBar title="管理服务范围" />  
        <div class="flex tabs">
            <div></div>
        </div>
        <div class="tab-outside">
            <div class="tab flex flex-sapce-x">
                <div class="item" v-for="(item, index) in tabInfo.list" :key="index" v-on:click="switchOptions(index)">
                    <span :class="index === tabInfo.activeIndex ? 'active' : ''">{{item.name}}</span>
                </div>
            </div>
            <div class="gap-line"></div>
        </div>
        <div v-show="tabInfo.activeIndex === 0">
            <div class="flex flex-space-x flex-center-y city-celect-cloumn-item">
                <div class="name">深圳全市</div>
                <div class="flex flex-center-y" v-on:click="onSwitchAllCt">
                    <van-switch v-model="allCityChecked" />
                </div>
            </div>
            <div class="flex flex-space-x city-celect-cloumn-item" :class="[
                allCityChecked && 'no-select'
            ]">
                <div class="name">
                    <span>区域部分：</span>
                    <span>{{cityListSelected.length > 0 ? cityListSelected.join('、') : '暂未选择'}}</span>
                </div>
                <div class="switch-city-open" v-on:click="onSwitchCity()">
                    <i class="iconfont i-xia icon-xia" v-if="!openCityList"></i>
                    <i class="iconfont i-xia icon-shang" v-if="openCityList"></i>
                </div>
            </div>
            <div style="height: 1px; background: #E5E5E5" v-if="!openCityList"></div>
            <div v-show="openCityList">
                <div class="city-list">
                    <div v-for="(row, index) in cityList" :key="index">
                        <p class="title">{{row.title}}</p>
                        <div class="city-item-load-tip" v-if="row.citys.length === 0">正在加载中</div>
                        <div class="imgs flex flex-wrap">
                            <span class="img-ipc"
                                :class="[
                                    cityListSelected.includes(city.name) && 'item-active'
                                ]"
                                v-for="(city, cityIndex) in row.citys" 
                                :key="`city_name_${cityIndex}`" 
                                v-on:click="clickCityItem(city.name)"
                            >{{city.name}}</span>
                        </div>
                    </div>
                </div>
                <div class="flex area-button-box">
                    <div class="area-button area-reset" v-on:click="areaReset">重置</div>
                    <div class="area-button area-success" v-on:click="areaSuccess">确定</div>
                </div>
            </div>
        </div>
        <div class="range-mange" v-show="tabInfo.activeIndex === 1">
            <div>
                <div class="amap-box">
                    <div id="amap_container" ref="map" class="map data-nil" tabindex="0">加载地图中</div>
                    <div class="resite" v-on:click="resite" :style="{
                        bottom: addStatus == 0 ? '1.88rem' : '3.18rem'
                    }">
                        <img class="resite-pic" src="@/assets/img/performance/homePage/site.png" />
                    </div>
                </div>
            </div>
            <div class="add-serve-list" v-if="addStatus === 0">
                <div class="serve-list">
                    <slip-del
                     v-for="(item, index) in serveList" :key="index"
                        :ref="`slipDel_${index}`"
                        del-text="删除"
                        @slip-open="slipOpen"
                        @del-click="del(index)"
                        @del="true"
                    >
                        <div class="serve-item flex">
                        <span class="name">范围{{index + 1}}</span>
                        <span class="text" v-on:click="onServeItem">{{item.name}}</span>
                    </div>

                    </slip-del>
                </div>
                <div class="addbox" v-on:click="readAddServe">
                    <div class="add">
                        <i class="iconfont icon-jia"></i>
                        <span>添加服务范围</span>
                    </div>
                </div>
            </div>
            <div class="addbox" v-if="addStatus === 1">
                <div class="flex flex-space-x select-center">
                    <span>所选中心</span>
                    <span class="text" v-on:click="POI">{{nearestJunction}}</span>
                    <span class="iconfont icon-guanbi" v-on:click="addStatus = 0"></span>
                </div>
                <div class="gap-line"></div>
                <div class="flex flex-space-x flex-center-y serve-scope">
                    <div style="width: 1.7rem;">服务半径</div>
                    <div style="width: 4.2rem">
                        <progress-bar :progressSumUp="progressSumUp" :minProgress="minProgress" @change="progressChange"></progress-bar>
                    </div>
                    <span>{{cp}}KM</span>
                </div>
                <div class="gap-line"></div>
                <div class="add" v-on:click="addServe">添加</div>
            </div>
            <div class="poiPicker" v-if="addStatus === 2">
                <div v-if="!placeSearch" class="nil-data">
                    加载中
                </div>
                <div v-else>
                    <div class="flex head-handle flex-space-x">
                        <div class="search-box">
                            <input class="search" @compositionstart="compositionstart" @compositionend="compositionend" v-on:input="onpoiPicker" v-model="poiPickerVal" placeholder="请输入地址" />
                            <i class="iconfont icon-guanbi2" v-on:click="resetPoi"></i>
                        </div>
                        <div class="cancel" v-on:click="addStatus = 1">取消</div>
                    </div>
                    <ul v-if="poiPickerList.length > 0">
                        <li v-for="(item, index) in poiPickerList" :key="index" v-on:click="onPoiItem(item)">
                            <div class="flex">
                                <i class="iconfont icon-dizhi"></i>
                                <span class="text">{{item.name}}</span>
                            </div>
                        </li>
                    </ul>
                    <div class="nil-data" v-if="poiPickerList.length === 0">
                        暂无数据
                    </div>
                </div>
            </div>
        </div>
        <div class="loading" v-if="loading === 0">
            <van-loading />
        </div>
    </div>
</template>
<script>
import main from './main.js'
export default main
</script>
<style lang="scss" scoped>
.service_scope{
    .tab-outside{
        overflow: hidden;
        // border-radius: .3rem .3rem 0px 0px;
        // position: sticky;
        width: 100%;
        // top: 0px;
        // z-index: 9;
        .tab{
            width: 100%;
            background-color: $color-primary;
            color: #fff;
            .item{
                width: 100%;
                text-align: center;
                position: relative;
                font-size: .28rem;
                line-height: 1rem;
            }
            .active{
                // color: $color-primary;
                &::after{
                    content: "";
                    display: block;
                    position: absolute;
                    bottom: .16rem;
                    left: 0px;
                    right: 0px;
                    margin: auto;
                    height: .04rem;
                    width: .3rem;
                    border-radius: .02rem;
                    background-color: #fff;
                }
            }
        }
    }
    .city-celect-cloumn-item{
        padding: 0px .24rem;
        background-color: #fff;
        font-size: .28rem;
        height: 1rem;
        line-height: 1rem;
        position: relative;
        &::after{
            content: "";
            display: block;
            position: absolute;
            bottom: 0px;
            height: 1px;
            width: 7.02rem;
            left: 0px;
            right: 0px;
            margin: auto;
            background-color: #E5E5E5;
        }
        &:nth-child(2){
            &::after{
                height: 0px;
            }
        }
        .i-xia{
            color: #E5E5E5;
        }
        .name{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .switch-city-open{
            padding-left: .24rem;
        }
    }
    .no-select{
        color: #ccc;
    }
    .city-list{
        background-color: #fff;
        padding: .4rem 0px 0px .24rem;
        .title{
            color: $color-text-regular;
            font-size: .24rem;
        }
        .city-item-load-tip{
            color: $color-text-regular;
            font-size: .24rem;
            text-indent: .24rem;
            padding-top: .2rem;
        }
        .imgs{
            padding: .3rem 0px .4rem 0px;
            .img-ipc{
                margin-right: .24rem;
                margin-bottom: .24rem;
                height: .7rem;
                line-height: .7rem;
                padding-left: .67rem;
                padding-right: .67rem;
                border-radius: .1rem;
                background-color: #f5f5f5;
                font-size: .28rem;
                // &:nth-child(4n){
                //    margin-right: 0px; 
                // }
            }
            .item-active{
                background-color: $color-primary;
                color: #fff;
            }
        }
    }
    .area-button-box{
        border-top: 1px solid $border-color-base;
        .area-button{
            width: 100vw;
            height: 1rem;
            text-align: center;
            line-height: 1rem;
        }
        .area-button{
            color: $color-primary;
            background-color: #fff;
        }
        .area-success{
            color: #fff;
            background-color: $color-primary;
        }
    }
    .range-mange{
        .add-serve-list{            
            .serve-list{
                position: fixed;
                top: 1.9rem;
                z-index: 9;
                background-color: #fff;
                width: 100%;
                max-height: calc(100vh - 3rem);
                overflow: auto;
                .serve-item{
                    font-size: .28rem;
                    width: 7.02rem;
                    margin: auto;
                    height: 1rem;
                    line-height: 1rem;
                    position: relative;
                    &::after{
                        position: absolute;
                        content: "";
                        display: block;
                        left: 0px;
                        right: 0px;
                        margin: auto;
                        height: 1px;
                        width: 7.02rem;
                        background-color: $color-page-background;
                    }
                    .name{
                        color: $color-text;
                        width: 1.13rem;
                    }
                    .text{
                        color: #282828;
                        padding-left: .1rem;
                        white-space: nowrap;
                        width: 6.2rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
        .addbox{
            position: fixed;
            bottom: 0px;
            left: 0px;
            border-top: 1px solid $border-color-base;
            background-color: #fff;
            .add{
                text-align: center;
                width: 100vw;
                height: 1.08rem;
                line-height: 1.08rem;
                font-size: .32rem;
                color: $color-primary;
                .iconfont{
                    font-size: .32rem;
                    display: inline-block;
                    margin-right: .1rem;
                }
            }
            .select-center, .serve-scope{
                height: 1rem;
                line-height: 1rem;
                background-color: #fff;
                padding: 0px .24rem;
                color: #656565;
                font-size: .28rem;
                .text{
                    color: #282828;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    width: 4.5rem;
                    overflow: hidden;
                }
            }
            .gap-line{
                width: 7.02rem;
                height: 1px;
                background-color: $border-color-base;
                margin: auto;
            }
            .select-center{
                // border-top: 1px solid $border-color-base;
                // border-bottom: 1px solid $border-color-base;
            }
        }
        .amap-box{
            #amap_container{
                width: 100vw;
                height: calc(100vh - 1.9rem);
                position: fixed;
                top: 1.9rem;
            }
            .resite{
                position: fixed;
                left: .12rem;
                z-index: 3;
                .resite-pic{
                    width: 1.04rem;
                    height: 1.04rem;
                }
            }
        }
        .poiPicker{
            width: 100vw;
            height: calc(100vh - 1.9rem);
            background-color: #fff;
            z-index: 22;
            position: relative;
            overflow-y: auto;
            .head-handle{
                padding: .24rem;
                height: .7rem;
                line-height: .7rem;
                .search-box{
                    position: relative;
                    flex: auto;
                    .search{
                        border-width: 0px;
                        border-radius: .06rem;
                        padding-left: .2rem;
                        box-sizing: border-box;
                        width: 100%;
                        background-color: $color-page-background;
                    }
                    .iconfont{
                        position: absolute;
                        right: 0px;
                        top: 0px;
                        bottom: 0px;
                        margin: auto;
                        padding-right: .1rem;
                        color: rgba(0,0,0,.2);
                    }
                }
                .cancel{
                    color: $color-text-regular;
                    font-size: $fz-6;
                    padding-left: .24rem;
                }
            }
            ul{
                height: calc(100vh - 1.9rem - 1.7rem);
                overflow: auto;
                li{
                    padding: 0px .24rem;
                    height: 1rem;
                    line-height: 1rem;
                    color: $color-text;
                    &::after{
                        content: "";
                        display: block;
                        left: 0px;
                        right: 0px;
                        margin: auto;
                        height: 1px;
                        width: 7.02rem;
                        background-color: $color-page-background;
                    }
                    .text{
                        color: #282828;
                        padding-left: .1rem;
                        white-space: nowrap;
                        width: 6.2rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .iconfont{
                        color: #656565;
                    }
                }
            }
        }
        .nil-data{
            text-align: center;
            font-size: .28rem;
            color: $color-text-regular;
            padding-top: .5rem;
        }
    }
}
</style>
